<template>
  <el-select
    v-model="selectedList"
    multiple
    filterable
    collapse-tags
    @change="handleChange"
  >
    <el-option label="全选" value="__vp_selectAll__"></el-option>
    <el-option
      v-for="(item, index) in models"
      :key="index"
      :label="item.fjzch"
      :value="item.fjzch"
    >
    </el-option>
  </el-select>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, toRefs, watch } from "vue";
import request from "/@/utils/request";

export default defineComponent({
  name: "AircraftMultSelect",
  emits: ["aircraftMultSelected"],
  props: {
    selected: {
      type: Array,
      default: [],
    },
    fjjx: {
      type: String,
      default: "",
    },
    fjjxList : {
      type: Array,
      default: [] as string[],
    },
    auth : {
      type: Boolean,
      default : false
    },
    resultType : {
      type: String,
      default: 'string',
    },
    NA : {
      type: Boolean,
      default : false
    },
  },
  setup(props, context) {

    const state = reactive({
      loading: false,
      models: [{ id: "", fjzch: "", jxid: '', jx: '', fjxlh: '' }],
      all:false,
    });
    const loadData = () => {
      state.loading = true;
      request
        .get("/basicData/aircraft/all", {
          params: {
            zt:10,
            allData: !props.auth,
            fjjxList: props.fjjxList && props.fjjxList.length > 0 ? props.fjjxList : (props.fjjx ? [props.fjjx] : []),
          },
        })
        .then((res) => {
          state.models = res?.data|| [];
          if(props.NA){
            state.models.push({fjzch: "N/A", id: '', jxid: '', jx: '', fjxlh: ''})
          }
        })
        .finally(() => {
          state.loading = false;
        });
    };

    onMounted(() => {
      loadData();
    });
    const selectRef = ref();
    const handleChange = (val: any[]) => {

      let array=[];
      if(state.all){
          state.all =false;
          if(val.includes("__vp_selectAll__")){
              array = val.filter(v => v!="__vp_selectAll__")
          }
      }else{
          if(val.includes("__vp_selectAll__")){
              array = state.models.map((val)=>val.fjzch);
              state.all = true;
          }else{
              array = val;
          }
      }

      if (props.resultType === 'string') {
          context.emit("aircraftMultSelected", array);
      } else {
          const result = array.map((fjzch) => {
            return state.models.find((model) => {
              return model.fjzch === fjzch;
            });
          });
          context.emit("aircraftMultSelected", result);
      }
    };

    watch(()=> [props.fjjx, props.fjjxList], ()=>{
			loadData()
		})

    const selectedList = computed({
        get(){
            let array = [] as string[];
            if(props.selected){
                state.models.forEach((val: any)=>{
                    if(props.selected.includes(val.fjzch)){
                        array.push(val.fjzch);
                    }
                })
                if(array.length>0 && array.length == state.models.length){
                    array.unshift("__vp_selectAll__");
                    state.all = true;
                }
            }
            return array;
        },
        set(val){
            // let index = val.indexOf("__vp_selectAll__");
            // if(index > -1){
            //     val.splice(index, 1);
            // }
            // context.emit("aircraftModelMultSelected", val);
        }
    })

    return {
      ...toRefs(state),
      ...toRefs(props),
      handleChange,
      selectRef,
      selectedList,
    };
  },
});
</script>
<style lang="scss" scoped>
:deep(.select-trigger.el-tooltip__trigger) {
  height: 32px;
}
</style>